<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      title="调整顺序"
      align="center"
      :visible.sync="innerRecordDialogFormVisible"
      @closed="closeRecordDialog"
    >
      <div class="basic-info search">
        <el-table
          ref="tableData"
          :data="tableData"
          element-loading-text="Loading"
          fit
          height="500px"
          highlight-current-row
        >
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>

          <el-table-column label="检测项目">
            <template slot-scope="scope">
              {{ scope.row.detectionItemName }}
            </template>
          </el-table-column>

          <el-table-column label="引用实验记录单">
            <template slot-scope="scope">
              <span v-html="scope.row.experimentTemplateRecord"></span>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="reportSort" label="排序">
            <template slot-scope="scope">
              {{ scope.row.sort }}
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  type="primary"
                  :disabled="scope.$index == 0"
                  @click="moveUp(scope.row, scope.$index)"
                  >上移</el-link
                >
                <el-link
                  type="primary"
                  :disabled="scope.$index + 1 == tableData.length"
                  @click="moveDown(scope.row, scope.$index)"
                  >下移</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑页面 -->
  </div>
</template>
<script>
import {
  SequenceAdjustmentGetList,
  UpdateSequenceAdjustment,
} from "../../api/Report/ReportManage";
export default {
  name: "ElnRecordListDialog",
  components: {},
  props: {
    entrustTaskId: {
      type: String,
      default: "",
    },
    sampleInfoId: {
      type: String,
      default: "",
    },
    elnRecordIds: {
      type: Array,
      default: () => [],
    },
    experimentPagination: {
      type: Object,
      default: () => {},
    },
    experimentTemplateRecordIdList: {
      type: Array, // 布尔
      default: () => [], // 必填
    },
    recordDialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
  },
  data() {
    return {
      tableData: [],
      loading: false,
      innerRecordDialogFormVisible: false,
    };
  },
  watch: {},
  created() {
    this.innerRecordDialogFormVisible = this.recordDialogFormVisible;
    this.getList();
  },
  methods: {
    // 取消
    closeDialog() {
      this.closeRecordDialog(0);
    },
    // 确定
    onSubmit() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].sort = i;
      }
      UpdateSequenceAdjustment(this.tableData).then((res) => {
        this.closeRecordDialog(1);
      });
    },
    // 获取实验记录单
    getList() {
      SequenceAdjustmentGetList({ id: this.sampleInfoId }).then((res) => {
        this.tableData = res.data;
      });
    },
    // state：1点的是确定，0点的是取消
    closeRecordDialog(state) {
      this.innerRecordDialogFormVisible = false;
      this.$emit("update:recordDialogFormVisible", false);
    },

    moveUp(rowData, index) {
      if (index > 0) {
        const upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1); // 删除
        this.tableData.splice(index, 0, upData); // 增加
      } else {
        this.$message({
          message: "已经是第一条，上移失败",
          type: "warning",
        });
      }
    },
    moveDown(rowData, index) {
      if (index + 1 === this.tableData.length) {
        this.$message({
          message: "已经是最后一条，下移失败",
          type: "warning",
        });
      } else {
        const downData = this.tableData[index + 1];
        downData.sort = downData.sort - 1;
        const currentData = this.tableData[index];
        currentData.sort = currentData.sort + 1;
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
    },
  },
};
</script>
<style scoped>
.search {
  text-align: left;
}
</style>
